<template>
  <div class="table-mechanism">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
          添加机构
        </el-button>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>

        <el-form
          ref="form"
          size="mini"
          :inline="true"
          v-model="organ"
          @submit.native.prevent
        >
          <el-form-item>
            <el-form-item  prop="institutionName">
<!--              <el-select-->
<!--                v-model="organ"-->
<!--                @change="change"-->

<!--                style="margin-left: 10px;"-->
<!--                placeholder="机构名称">-->
<!--                <el-option-->
<!--                  v-for="item in organs"-->
<!--                  :key="item.institutionNumber"-->
<!--                  :label="item.institutionName"-->
<!--                  :value="item.institutionNumber">-->
<!--                </el-option>-->
<!--              </el-select>-->
                       <el-input v-model="organ.institutionName" placeholder="机构名称"></el-input>
            </el-form-item>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              native-type="button"
              @click="find"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="list"



    >

      <el-table-column show-overflow-tooltip label="机构编号" width="200"  prop="institutionNumber">

      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="institutionName"
        label="机构名称"

      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="机构地址"
        prop="institutionalAddress"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="上级机构"
        prop="superiorName"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="备注信息"
        prop="remark"

      ></el-table-column>
      <el-table-column label="禁用状态" prop="gender">
        <template slot-scope="scope">
          <span v-if="scope.row.disabled==true"><el-tag type="warning">禁用</el-tag></span>
          <span v-if="scope.row.disabled==false"><el-tag type="success">启用</el-tag></span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="创建者"
        prop="creatorName"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="180px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="text"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.$index, scope.row)" >
            删除
          </el-button>
          <el-button type="text" @click="handleInfo(scope.$index, scope.row)">
            查看详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>



    <el-pagination
      :background="background"


      :page-size="queryForm.limit"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      width="500px"

    >
      <el-form ref="form" :model="secondlist" label-width="80px">
        <el-form-item label="机构名称">
          <el-input v-model="secondlist.institutionName"></el-input>
        </el-form-item>
        <el-form-item label="机构地址">
          <el-input v-model="secondlist.institutionalAddress"></el-input>
        </el-form-item>
        <el-form-item label="备注信息">
          <el-input v-model="secondlist.remark"></el-input>
        </el-form-item>
        <el-form-item label="禁用状态">
          <el-switch
            v-model="secondlist.disabled"
            active-text="禁用"
            inactive-text="启用"
            @change="changebutton"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>

    </el-dialog>

    <table-edit @fetchData="find" ref="edit"></table-edit>
    <inforEdit ref="info" ></inforEdit>
  </div>

</template>

<script>
    import { doDelete } from "../../../api/table";
    import { searchList} from "../../../api/table";
    import TableEdit from "./components/TableEdit";
    import InforEdit from "./components/InforEdit";
    import {search} from "../../../api/table";
    import {save} from "../../../api/table";

    export default {
        name: "Mechanism",
        data() {
            return {



                dialogFormVisible: false,
                imgShow: true,
                list: [],
                secondlist:[],
                 form:{
                     institutionNumber:"",
                     institutionName:"",
                     disabled:"",
                     child:"",
                 },
                rules:[

                ],
                listLoading: true,
                layout: "total, sizes, prev, pager, next, jumper",
                total: 0,
                background: true,
                selectRows: "",
                elementLoadingText: "正在加载...",
                organ:{
                    institutionName:"",
                },
                title:"编辑",
                queryForm: {
                    currPageNo: 1,
                    limit: 10,
                    institutionName:"",
                  institutionNumber:"",
                    child:true,
                },
            };
        },
        created(){
          setTimeout(() => {
            this.queryForm.institutionNumber=localStorage.getItem("institutionNumber")
            console.log(this.queryForm.institutionNumber)
            this.find()
          }, 1000);




        },
        components: {
            TableEdit,
            InforEdit,
        },

        methods:{
            handleAdd() {
                this.$refs["edit"].showEdit();
            },
            change(value){
                this.form.institutionNumber=value
            },
            handleInfo(index,row) {

                this.$refs["info"].showEdit(row);
            },
            handleEdit(index, row) {
                console.log(index, row);

                this.dialogFormVisible = true;
                this.secondlist={
                    ...row
                }

            },

            changebutton(){
               console.log(this.secondlist.disabled)
            },
            // handleQuery() {
            //
            //     this.fetchData();
            // },
            // async fetchData() {
            //     this.listLoading = true;
            //     this.list=[];
            //     this.total=0;
            //     console.log(this.organ)
            //     this.queryForm.institutionName=this.organ.institutionName
            //     const result = await searchList(this.queryForm);
            //     console.log(result.data.data)
            //
            //  if(result.data==undefined){
            //
            //  }else {
            //      this.list.push(result.data.data)
            //  }






            //     setTimeout(() => {
            //         this.listLoading = false;
            //     }, 500);
            // },

            async find() {
                this.listLoading = true;
                this.queryForm.institutionName=this.organ.institutionName
                // this.queryForm.institutionNumber = ''
                const { data, total } = await search(this.queryForm);
                this.list=data.data
                this.total=data.total
                console.log(data.data)


                setTimeout(() => {
                    this.listLoading = false;
                }, 500);
            },
            close() {

                this.dialogFormVisible = false;

            },
            async revise() {

                const { code} = await save(this.secondlist);
                console.log(code)
                if(code==200){
                    this.$baseMessage("编辑成功");
                    this.dialogFormVisible = false
                    this.find()
                }else {
                    this.$baseMessage("编辑失败");
                }


            },
            save() {
                this.revise()

              console.log(this.secondlist)
            },
            handleDelete(index,row) {
                console.log(row.institutionNumber)
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const { code } = await doDelete({ institutionNumber: row.institutionNumber});
                        console.log(code)
                        if(code==200){
                            this.$baseMessage("删除成功");
                            this.find();
                        }else {
                            this.$baseMessage('删除失败');
                        }

                    });
                }
            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.find();
            },
            handleCurrentChange(val) {
                this.queryForm.currPageNo = val;
                this.find();
            },
        }
    }
</script>

<style scoped>

</style>
